<template>
	<div class="type-manage">
		<!-- <div class="page-top" v-if="$store.state.options.user.oda.notice != null">
			<dl class="notice">
				<dt><img src="../../../static/images/notice-red-mini.png" /></dt>
				<dd>{{ $store.state.options.user.oda.notice }}</dd>
			</dl>
		</div> -->
		<div v-show="pga > 0" @click="eventGoBackOperate" class="goback-button">返回上一级</div>
		<van-list v-model="dataset.loading" :finished="dataset.finished" finished-text=" " @load="controllerRequestOfferList">
			<dl v-for="(item, index) in dataset.items" :key="index" class="offer-list-wrap">
				<dt class="title">
					<p>{{ item.name }}</p>
				</dt>
				<dd v-if="item.price" class="unit">
					<p><span>{{ item.price[0].weight }}kg</span><span>/元</span></p>
					<p><span>{{ item.price[0].number }}个</span><span>/元</span></p>
				</dd>
				<dd class="button">
					<img src="../../../static/images/edit-orange.png" />
					<span @click="eventClickChangetype(item, index)">编辑分类</span>
					<img src="../../../static/images/delete-blue.png" />
					<span @click="eventClickDeletetype(item, index)">删除分类</span>
					<img src="../../../static/images/folder.png" />
					<span @click="pga = item.id">进入下级</span>
				</dd>
			</dl>
		</van-list>
		<van-button class="add-type" @click="eventClickAddtype()" type="primary">新增分类</van-button>
		<!-- <tab-group :dataset="navButtonGroup" identity="4" :index="1" /> -->
		<!-- <van-dialog v-model="showChange" title="编辑分类" show-cancel-button @confirm="changeTypeName">
			<van-cell-group>
                <van-field v-model="name" :placeholder="placeholder" />
                <div class="add-classify">
                    <van-field v-model="addItem.name" center clearable placeholder="单位名称" />
                    <van-field v-model="addItem.value" center clearable placeholder="计量值(KG)" />
                    <van-button slot="button" size="small" type="primary" @click="eventClickAddMeteringOperate('edit')">添加</van-button>
                </div>
                <template v-for="(ita, index) in item.danwei">
                    <div class="classify-list" :key="index">
                        <van-field v-model="ita.danweiming" placeholder="单位名称" />
                        <van-field v-model="ita.transweight" placeholder="计量值(KG)" />
                        <van-button v-if="index == 0" slot="button" size="small" type="default" @click="item.danwei.splice(index, 1)">删除</van-button>
                    </div>
                </template>
			</van-cell-group>
		</van-dialog>
		<van-dialog v-model="showAdd" title="新增分类" show-cancel-button @confirm="AddTypeName">
			<van-field v-model="name" placeholder="请输入分类名称"></van-field>
            <div class="add-classify">
                <van-field v-model="addItem.name" center clearable placeholder="单位名称" />
                <van-field v-model="addItem.value" center clearable placeholder="计量值(KG)" />
                <van-button slot="button" size="small" type="primary" @click="eventClickAddMeteringOperate">添加</van-button>
            </div>
            <template v-for="(item, index) in addItem.list">
                <div class="classify-list" :key="index">
                    <van-field v-model="item.danweiming" placeholder="单位名称" />
                    <van-field v-model="item.transweight" placeholder="计量值(KG)" />
                    <van-button v-if="index == 0" slot="button" size="small" type="default" @click="addItem.list.splice(index, 1)">删除</van-button>
                </div>
            </template>
		</van-dialog> -->
		<van-dialog v-model="showChange" title="编辑分类" show-cancel-button @confirm="changeTypeName">
			<van-cell-group>
				<van-field v-model="name" :placeholder="placeholder" />
				<template v-for="(ita, index) in item.danwei">
					<div class="classify-list" :key="index">
						<van-field v-model="ita.danweiming" placeholder="单位名称" />
						<van-field v-model="ita.transweight" placeholder="计量值(KG)" />
						<van-button slot="button" size="small" type="default" @click="item.danwei.splice(index, 1)">删除</van-button>
					</div>
				</template>
			</van-cell-group>
		</van-dialog>
		<van-dialog v-model="showAdd" title="新增分类" show-cancel-button @confirm="AddTypeName">
			<van-field v-model="name" placeholder="请输入分类名称" />
			<div class="add-classify">
				<van-field v-model="addItem.name" center clearable placeholder="新单位名称" />
				<van-field v-model="addItem.value" center clearable placeholder="计量值" />
			</div>
		</van-dialog>
	</div>
</template>

<script>
	import { List, Button, Dialog, CellGroup, Field, Popup } from 'vant';
	import TabGroup from "../../components/currency/tab/tab.vue";

	export default {
		name: "GeneralRepositoryTypeManage",
		components: {
			[List.name]: List, [Button.name]: Button, [Dialog.Component.name]: Dialog.Component,
			[Field.name]: Field, [Popup.name]: [Popup], [CellGroup.name]: CellGroup,
			TabGroup
		},
		data() {
			return {
				index: 0,
				addItem: {
					name: '', value: '',
					list: [
						{
							danweiming: '千克', transweight: 1
						}
					]
				},
				pga: 0, pgaList: [],
				showChange: false,
				showAdd: false,
				placeholder: '',
				name: '',
				item: {},
				navButtonGroup: [
					{
						name: "暂存点订单", route: { path: '/GeneralRepository/index' }
					},
					{
						name: "分类管理", route: { path: '/GeneralRepository/type-manage' }
					},
					{
						name: "查询报价", route: { path: '/GeneralRepository/enquiry-quotation' }
					},
					{
						name: "个人中心", route: { path: '/GeneralRepository/personal-center' }
					}
				],
				dataset: {
					page: 0, limit: 30,
					loading: false, finished: false,
					items: []
				}
			}
		},
		methods: {
			controllerRequestOfferList() {
				var url = '/api/home/garbage/getlist',
					params = {
						page: this.dataset.page,
						list_rows: this.dataset.limit,
						pga: 0
						// token: this.$store.state.options.user.token,
						// status: 1
					};

				if (this.pga > 0) params.pga = this.pga;

				this.$util.postRequestInterface(url, params, (res) => {
					this.dataset.items = res.data.data;

					if (this.dataset.items.length >= res.data.count) this.dataset.finished = true;
					this.dataset.loading = false;
				});
			},
			eventGoBackOperate() {
				this.pga = this.pgaList.pop() || 0;
			},
			eventClickAddtype() {
				this.name = '';
				this.showAdd = true;
			},
			AddTypeName() {
				if (this.name == '') {
					this.$toast('请输入分类名称');
					return false;
				} else {
                    var url = '/api/home/garbage/add',
                        item = [];

                    if(this.addItem.name && this.addItem.value) {
                        item.push({
                            danweiming: this.addItem.name, transweight: this.addItem.value
                        });
                    }
					// var param = {
					// 	name: this.name,
					// 	pga: this.pga,
					// 	danwei: JSON.stringify(this.addItem.list)
                    // };
					var param = {
						name: this.name,
						pga: this.pga,
						danwei: JSON.stringify(item)
                    };

					this.$util.postRequestInterface(url, param, (res) => {
						this.$router.go(0);
					});
				}
			},
			eventClickChangetype(item, index) {
				this.name = '';
				this.showChange = true;
				this.placeholder = item.name;
				this.item = item;
				this.index = index;
			},
			changeTypeName() {
				if (this.name == '') {
					this.name = this.item.name;
				}

				var buildPostData = (data) => {
					var result = [];
					for (let x of data) {
						result.push({
							danweiming: x.danweiming, transweight: x.transweight
						});
					}

					return result;
				};

				var url = '/api/home/garbage/change',
					param = {
						token: this.item.token,
						name: this.name,
						pga: this.item.pga,
						id: this.item.id,
						danwei: JSON.stringify(buildPostData(this.item.danwei))
					};

				// console.log(param);
				this.$util.postRequestInterface(url, param, (res) => {
					// this.$router.go(0);
					this.dataset.items[this.index] = this.item;
				});
			},
			eventClickDeletetype(item, index) {
				this.item = item;
				this.index = index;

				Dialog.confirm({
					title: '操作提示',
					message: '确认要删除' + item.name + '吗？'
				}).then(() => {
					var url = '/api/home/garbage/delete';
					var param = {
						id: this.item.id,
					};
					this.$util.postRequestInterface(url, param, (res) => {
						// this.$router.go(0);
						this.dataset.items.splice(this.index, 1);
					})
				})
			},
			eventClickAddMeteringOperate(mode) {
				if (!this.addItem.name || !this.addItem.value) {
					this.$toast('不能为空');
					return;
				}

				var item = {
					danweiming: this.addItem.name,
					transweight: this.addItem.value
				};
				if (mode == 'edit') {
					this.dataset.items[this.index].danwei.push(item);
				} else {
					this.addItem.list.push(item);
				}
				this.addItem.name = '';
				this.addItem.value = '';
			}
		},
		watch: {
			pga(nVal, oVal) {
				// console.log(nVal, oVal);

				if (this.pgaList.indexOf(nVal) < 0 && nVal > 0) this.pgaList.push(nVal);
				// console.log(this.pgaList);

				this.dataset.page = 0;
				this.dataset.items = [];
				this.dataset.finished = false;
				this.dataset.loading = false;

				// this.controllerRequestOfferList();
			}
		}
	}
</script>

<style scoped lang = "scss">
	.add-classify {
		display: flex;
		align-items: center;
	}
	.classify-list {
		display: flex;
		align-items: center;
	}

	.add-type {
		width: 90%;
		background: #00cc00;
		font-size: 1.6rem;
		margin-left: 5%;
		margin-top: 1.8rem;
	}

	.page-top {
		width: 100%;
		height: 3rem;
		position: relative;

		.notice {
			position: absolute;
			top: 0rem;
			width: 100%;
			margin: 0rem;
			padding: 0.7rem 1rem;
			display: flex;
			background: rgba(255, 247, 209, 1);
			z-index: 1;
			box-sizing: border-box;

			dt {
				padding-right: 1rem;

				img {
					width: 1.4rem;
				}
			}

			dd {
				white-space: nowrap;
				flex: 1;
				margin: 0rem;
				padding: 0rem;
				color: #ff9000;
				font-size: 1.3rem;
			}
		}
	}

	.offer-list-wrap {
		padding: 0rem 1rem;
		border-bottom: 0.4rem solid #f4f4f4;

		.title {
			padding: 1.6rem 0rem 1rem;
		}

		.unit {
			display: flex;

			p {
				flex: 1;
				font-size: 1.4rem;

				span:first-child {
					color: #ff0000;
				}
			}

			p:last-child {
				text-align: right;
			}
		}

		.button {
			text-align: right;
			font-size: 1.3rem;
			padding: 1.3rem 0rem;

			img {
				width: 1.7rem;
				vertical-align: middle;
				margin-right: 0.4rem;
			}

			span {
				position: relative;
				top: 1.5px;
				margin-right: 2rem;
			}

			& span:last-child {
				margin-right: 0;
			}
		}
	}

	.goback-button {
		background-color: #00cc00;
		padding: 1rem;
		color: #ffffff;
	}
</style>
